extends ../_layout

block active
  - sidebar_active = 'chart-radial.html'

block content
  h3 Radial charts
    small Canvas based &amp; No canvas Pure CSS radial progress bars solutions

  h4.page-header Knob
  .row
    .col-md-3.col-sm-6
      .panel
        .panel-heading Default
        .panel-body.text-center
          input#knob-chart1(type="text", value="80")
    .col-md-3.col-sm-6
      .panel
        .panel-heading Ready only
        .panel-body.text-center
          input#knob-chart2(type="text", value="45")
    .col-md-3.col-sm-6
      .panel
        .panel-heading Offset and arc
        .panel-body.text-center
          input#knob-chart3(type="text", value="30")
    .col-md-3.col-sm-6
      .panel
        .panel-heading Display previous
        .panel-body.text-center
          input#knob-chart4(type="text", value="20")

  h4.page-header Easypie Charts
  .row
    .col-md-3.col-sm-6
      .panel
        .panel-heading Default
        .panel-body.text-center
          #easypie1.easypie-chart(data-percent='85')
            span 85
    .col-md-3.col-sm-6
      .panel
        .panel-heading Slim
        .panel-body.text-center
          #easypie2.easypie-chart(data-percent='45')
            span 45
    .col-md-3.col-sm-6
      .panel
        .panel-heading Track color
        .panel-body.text-center
          #easypie3.easypie-chart(data-percent='25')
            span 25
    .col-md-3.col-sm-6
      .panel
        .panel-heading Scale color
        .panel-body.text-center
          #easypie4.easypie-chart(data-percent='60')
            span 60

  h4.page-header Pure CSS
    small radial progress bars solutions
  // START row
  .row
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading Radial Size
        .panel-body.text-center
          .row
            .col-md-3
              .radial-bar.radial-bar-85.radial-bar-lg(data-label="85%")
              p: code .radial-bar.radial-bar-85.radial-bar-lg
            .col-md-3
              .radial-bar.radial-bar-45(data-label="45%")
            .col-md-3
              .radial-bar.radial-bar-60.radial-bar-sm(data-label="60%")
            .col-md-3
              .radial-bar.radial-bar-20.radial-bar-xs(data-label="20%")
      // END panel
      // START panel
      .panel.panel-default
        .panel-heading Radial with Images
        .panel-body.text-center
          .row
            .col-md-3
              .radial-bar.radial-bar-20.radial-bar.radial-bar-danger
                img(src="img/user/03.jpg", alt="Image")
            .col-md-3
              .radial-bar.radial-bar-35.radial-bar-warning(data-label="35%")
                img(src="img/user/01.jpg", alt="Image")
            .col-md-3
              .radial-bar.radial-bar-50.radial-bar-info(data-label="50%")
                img(src="img/user/04.jpg", alt="Image")
            .col-md-3
              .radial-bar.radial-bar-100.radial-bar-success(data-label="100%")
                img(src="img/user/05.jpg", alt="Image")
      // END panel
      // START panel
      .panel.panel-default
        .panel-heading Radial with Tooltips
        .panel-body.text-center
          .row
            .col-md-3
              br
              .radial-bar.radial-bar-85(data-label="85%", data-toggle="tooltip", data-title="85%")
            .col-md-3
              br
              .radial-bar.radial-bar-45(data-label="45%", data-toggle="tooltip", data-title="45%")
            .col-md-3
              br
              .radial-bar.radial-bar-60(data-label="60%", data-toggle="tooltip", data-title="60%")
            .col-md-3
              br
              .radial-bar.radial-bar-20(data-label="20%", data-toggle="tooltip", data-title="20%")
      // END panel
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading Radial Variants
        .panel-body.text-center
          .row
            .col-md-3
              .radial-bar.radial-bar-20.radial-bar-lg.radial-bar-danger(data-label="20%")
              p: code .radial-bar.radial-bar-20.radial-bar-lg.radial-bar-danger
            .col-md-3
              .radial-bar.radial-bar-35.radial-bar-lg.radial-bar-warning(data-label="35%")
            .col-md-3
              .radial-bar.radial-bar-50.radial-bar-lg.radial-bar-info(data-label="50%")
            .col-md-3
              .radial-bar.radial-bar-100.radial-bar-lg.radial-bar-success(data-label="100%")
      // END panel
      // START panel
      .panel.panel-default
        .panel-heading Radial applications
        .panel-body.text-center
          .radial-bar.radial-bar-85.radial-bar-lg(data-label="85%")
          p Visitors
        .panel-footer.text-center
          .row
            .col-md-4
              .radial-bar.radial-bar-warning.radial-bar-35.radial-bar-sm(data-label="35%")
              p: small Conversions
            .col-md-4
              .radial-bar.radial-bar-info.radial-bar-45.radial-bar-sm(data-label="45%")
              p: small Recurrent
            .col-md-4
              .radial-bar.radial-bar-success.radial-bar-20.radial-bar-sm(data-label="20%")
              p: small Uniques
      // END panel
  // END row
  h4.page-header ClassyLoader
    small canvas based jQuery loader plugin
  // START panel
  .panel.panel-default
    .panel-body.text-center
      .row
        .col-md-3
          canvas(data-classyloader="", data-trigger-in-view="true" data-percentage="100", data-speed="20", data-font-size="50px", data-diameter="80", data-line-color="#0094cb", data-remaining-line-color="rgba(200,200,200,0.4)", data-line-width="10")
        .col-md-3
          canvas(data-classyloader="", data-percentage="60", data-speed="8", data-font-size="20px", data-diameter="70", data-line-color="#7bbf62", data-remaining-line-color="#edf2f6", data-line-width="40", data-rounded-line="true", data-show-text="false")
        .col-md-3
          canvas(data-classyloader="", data-percentage="60", data-speed="40", data-line-color="#ff3366", data-remaining-line-color="#edf2f6", data-line-width="2")
        .col-md-3
          canvas(data-classyloader="", data-percentage="34", data-speed="20", data-font-size="20px", data-diameter="30", data-line-color="#f35839", data-remaining-line-color="#edf2f6", data-line-width="40")

block vendor_js
  // CLASSY LOADER
  script(src='../vendor/jquery-classyloader/js/jquery.classyloader.min.js')
  // JQUERY KNOB
  script(src='../vendor/jquery-knob/js/jquery.knob.js')
  // EASY PIE CHART
  script(src='../vendor/jquery.easy-pie-chart/dist/jquery.easypiechart.js')
